import { useState } from 'react'
// import reactLogo from './assets/react.svg'
// import viteLogo from '/vite.svg'
import { makeAutoObservable,  } from "mobx"
import { observer } from "mobx-react"
import CounterStore from "./store/CounterStore"
import Counter from "./Counter"
import './App.css'
// Model the application state.
class Timer {
  secondsPassed = 0

  constructor() {
      makeAutoObservable(this)
  }

  increase() {
      this.secondsPassed += 1
  }

  reset() {
      this.secondsPassed = 0
  }
}

const myTimer = new Timer()

// Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
  <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))
function App() {
  const counterStore = new CounterStore()
  const [count, setCount] = useState(0)
  setInterval(() => {
    myTimer.increase()
}, 1000)
  return (
    <>
   
     
      <h1>React+Vite + mobx</h1>
      <Counter  counterStore={counterStore}/>
      <TimerView timer={myTimer} />
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        
      </div>
    
    </>
  )
}

export default App
